<!-- 创建视图 -->
<template>
  <div>
    <el-card>
      <template #header>
        <span class="title-span">API基础信息</span>
      </template>
      <!-- // 两个输入框  一个是名称  一个是描述 -->
      <el-form label-width="100">
        <el-form-item label="节点名称：">
          <el-input v-model="props.showFlowData.data.label"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 10px">
      <template #header>
        <span class="title-span">API状态</span>
      </template>

      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIState.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIState.type" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 10px">
      <template #header>
        <span class="title-span">API输入</span>
      </template>
      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataOne.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataOne.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-select v-model="popShowData.APIInput.dataOne.selectValue">
            <el-option v-for="(item, index) in three_data_selectList" :key="index" :label="item.data.label"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-divider />

      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataTwo.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataTwo.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-select v-model="popShowData.APIInput.dataTwo.selectValue">
            <el-option v-for="(item, index) in drawing_documents_selectList" :key="index" :label="item.data.label"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-divider />

      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataThree.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataThree.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-select v-model="popShowData.APIInput.dataThree.selectValue" placeholder="创建图纸文件-新图纸图页">
            <el-option v-for="(item, index) in drawing_sheet_selectList" :key="index" :label="item.data.label"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-divider />

      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataFour.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataFour.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-input v-model="popShowData.APIInput.dataFour.value"></el-input>
        </el-form-item>
      </el-form>
      <el-divider />

      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataFive.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataFive.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-checkbox-group v-model="popShowData.APIInput.dataFive.checkList">
            <el-checkbox label="主视图" value="Front" />
            <el-checkbox label="背视图" value="Rear" />
            <el-checkbox label="左视图" value="Left" />
            <el-checkbox label="右视图" value="Right" />
            <el-checkbox label="俯视图" value="Top" />
            <el-checkbox label="仰视图" value="Bottom" />
            <el-checkbox label="轴侧视图" value="ShaftSide" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-divider />

      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataSix.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataSix.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-select v-model="popShowData.APIInput.dataSix.selectValue" @change="handleDataSixSelectValue">
            <el-option label="坐标平面" value="坐标平面"></el-option>
            <el-option label="最大面法向" value="MaxPlane"></el-option>
            <el-option label="出模/冲压方向" value="Line"></el-option>
            <el-option label="轴系" value="Aixs"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轴系选择：">
          <el-select v-model="popShowData.APIInput.dataSix.coordinatePlane"
            :disabled="popShowData.APIInput.dataSix.selectValue !== '坐标平面'"
            v-if="popShowData.APIInput.dataSix.selectValue !== 'Aixs'">
            <el-option label="X" value="X"></el-option>
            <el-option label="Y" value="Y"></el-option>
            <el-option label="Z" value="Z"></el-option>
          </el-select>
          <el-select v-model="popShowData.APIInput.dataSix.coordinatePlane"
            :disabled="popShowData.APIInput.dataSix.selectValue !== 'Aixs'"
            v-if="popShowData.APIInput.dataSix.selectValue === 'Aixs'">
            <el-option v-for="(item, index) in aixs_attribute_selectList" :key="index" :label="item.data.label"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轴系方向：" v-if="popShowData.APIInput.dataSix.selectValue === 'Aixs'">
          <el-select v-model="popShowData.APIInput.dataSix.aixsDirection">
            <el-option label="X" value="X"></el-option>
            <el-option label="Y" value="Y"></el-option>
            <el-option label="Z" value="Z"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" 方向线名称:">
          <el-input v-model="popShowData.APIInput.dataSix.directionLineName" placeholder="请输入方向线名称"
            :disabled="popShowData.APIInput.dataSix.selectValue !== 'Line'"></el-input>
        </el-form-item>
      </el-form>

      <el-divider />
      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIInput.dataSeven.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIInput.dataSeven.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-checkbox-group v-model="popShowData.APIInput.dataSeven.checkList">
            <el-checkbox label="生成轴" value="Axie" />
            <el-checkbox label="生成中心线" value="Centerline" />
            <el-checkbox label="生成圆角" value="Rounded" />
            <el-checkbox label="生成螺纹" value="Thread" />
            <el-checkbox label="生成隐藏线" value="HiddenLine" />
            <el-checkbox label="继承3D颜色" value="3DColor" />
            <el-checkbox label="投影3D线框" value="3DWireframe" />
            <el-checkbox label="投影3D点" value="3DPoint" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top: 10px">
      <template #header>
        <span class="title-span">API输出</span>
      </template>

      <div v-for="(item, index) in APIOutput" :key="index">
        <el-form label-width="100">
          <el-form-item label="名称：">
            <el-input v-model="item.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="类型：">
            <el-input v-model="item.type" disabled></el-input>
          </el-form-item>
        </el-form>
        <el-divider />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch, onUnmounted } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import { requiredDetection } from '../utils/methodName'
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const props = defineProps({
  // Define props here
  showFlowData: {
    type: Object,
  },
  drawer: {
    type: Boolean,
  },
  recapture: {
    type: Boolean
  },
  inputSelectNodeIds: {
    type: Array
  }
});
const popShowData = ref({
  APIBaseData: {
    name: '单个数据全部属性获取',
    desc: '通过数据，获取数据的固有属性',
  },
  APIState: {
    name: '成功',
    type: '布尔'
  },
  APIInput: {
    dataOne: {
      name: '3D数据',
      type: '3D文档',
      selectValue: '',
    },
    dataTwo: {
      name: '图纸文件',
      type: '2D文档',
      selectValue: '',
    },
    dataThree: {
      name: '图纸图页',
      type: '图页',
      selectValue: '',
    },
    dataFour: {
      name: '视图比例',
      type: '文本',
      value: '1',
    },
    dataFive: {
      name: '视图内容',
      type: '多选枚举',
      checkList: [],
    },
    dataSix: {
      name: '视图类型',
      type: '多选枚举',
      selectValue: '',
      aixsDirection: '',
      coordinatePlane: '',
      directionLineName: '',
    },
    dataSeven: {
      name: '修饰几何图形',
      type: '多选枚举',
      checkList: [],
    },
  },
  APIOutput: []
})

const three_data_selectList = computed(() => {
  let nodeList = flowNodes.getFlowNodes();
  const resultList = nodeList.filter(node => props.inputSelectNodeIds.includes(node.id)).filter(node => node.data.methodName === 'getCurrentData' || node.data.methodName === 'loop');

  // 遍历结果列表，根据 methodName 添加 type 属性
  resultList.forEach(node => {
    if (node.data.methodName === 'getCurrentData') {
      node.data.type = '3d';
    } else if (node.data.methodName === 'loop') {
      node.data.type = 'loop';
    }
  });

  return resultList;
});

const drawing_documents_selectList = computed(() =>
  flowNodes.getFlowNodes()
    .filter(node => props.inputSelectNodeIds.includes(node.id) && node.data?.methodName === 'createDrawing')
    .map(node => {
      const newNode = JSON.parse(JSON.stringify(node));
      const label = newNode.data?.label;
      if (typeof label === 'string') {
        newNode.data.label = `${label}-图纸页`;
      }
      return newNode;
    })
);


const aixs_attribute_selectList = computed(() => {
  let nodeList = flowNodes.getFlowNodes();
  const resultList = nodeList.filter(node => props.inputSelectNodeIds.includes(node.id)).filter(node => node.data.methodName === 'findAxis');

  return resultList;
});

const originalDrawingSheetSelectList = computed(() =>
  flowNodes.getFlowNodes()
    .filter(node =>
      props.inputSelectNodeIds.includes(node.id) &&
      node.data?.methodName === 'createSheet'
    )
    .map(node => {
      const { data } = node;
      const newLabel = data.popShowData
        ? `${data.popShowData.APIInput.dataTwo.name}-${data.label}`
        : data.label;
      return {
        ...node,
        data: {
          ...data,
          label: newLabel
        }
      };
    })
);

const drawing_sheet_selectList = computed(() => [
  ...drawing_documents_selectList.value,
  ...originalDrawingSheetSelectList.value
]);

const node_data = computed(() => {
  let obj = {
    //固定值
    positionFlag: props.showFlowData.data.positionFlag,
    methodName: props.showFlowData.data.methodName,

    // 自定义属性
    input3DData: popShowData.value.APIInput.dataOne.selectValue, //3D数据
    input3DType: '',
    input2DData: popShowData.value.APIInput.dataTwo.selectValue, //2D文件
    sheetName: popShowData.value.APIInput.dataThree.selectValue, //2D纸业

    scale: popShowData.value.APIInput.dataFour.value, // 比例
    views: '', // 视图

    projectFun: '',//投影平面
    projectLineName: '',//方向线名称

    aixsDirection: popShowData.value.APIInput.dataSix.aixsDirection,
    modify: '',
  }
  if (popShowData.value.APIInput.dataOne.selectValue) {
    let find_data = three_data_selectList.value.find(item => item.id == popShowData.value.APIInput.dataOne.selectValue);
    if (find_data) {
      obj.input3DType = find_data.data.type;
    }
  }
  if (popShowData.value.APIInput.dataSix.selectValue === '坐标平面') {
    obj.projectFun = popShowData.value.APIInput.dataSix.coordinatePlane
  }
  if (popShowData.value.APIInput.dataSix.selectValue === 'MaxPlane') {
    obj.projectFun = popShowData.value.APIInput.dataSix.selectValue
  }
  if (popShowData.value.APIInput.dataSix.selectValue === 'Line') {
    obj.projectFun = popShowData.value.APIInput.dataSix.selectValue
    obj.projectLineName = popShowData.value.APIInput.dataSix.directionLineName
  }
  if (popShowData.value.APIInput.dataSix.selectValue === 'Aixs') {
    obj.projectFun = popShowData.value.APIInput.dataSix.selectValue
    obj.projectLineName = popShowData.value.APIInput.dataSix.coordinatePlane
  }
  if (popShowData.value.APIInput.dataFive.checkList.length > 0) {
    obj.views = popShowData.value.APIInput.dataFive.checkList.join(',')
  }
  if (popShowData.value.APIInput.dataSeven.checkList.length > 0) {
    obj.modify = popShowData.value.APIInput.dataSeven.checkList.join(',')
  }
  return obj;
});

const APIOutput = computed(() => {
  const allCheckLists = [];

  popShowData.value.APIInput.dataFive.checkList.forEach((item) => {

    let name = ""
    switch (item) {
      case "Front":
        name = "主视图"
        break;
      case "Rear":
        name = "背视图"
        break;
      case "Left":
        name = "左视图"
        break;
      case "Right":
        name = "右视图"
        break;
      case "Top":
        name = "俯视图"
        break;
      case "Bottom":
        name = "仰视图"
        break;
      case "ShaftSide":
        name = "轴侧视图"
        break;
    }
    let obj = {
      name: name,
      type: '视图'
    }
    allCheckLists.push(obj);
  });


  return allCheckLists;
});

// watch(() => props.drawer, (val) => {
//     if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
  if (val) {
    setData();// 更新数据
  }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
  reset();
  getList();
}, { deep: true }, { immediate: true })


watch(() => APIOutput.value, (val) => {
  popShowData.value.APIOutput = val
})

onMounted(() => {
  getList();
  setData();
})

// onUnmounted(() => {
//   if(requiredDetection(node_data.value)) {
//     proxy.$modal.confirm(`请检查"${props.showFlowData.data.label}"节点是否填写完整`);
//   }
// })

const getList = () => {
  if (props.showFlowData.id) {
    if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
      let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
      if (nodeData.data.popShowData) {
        popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
      }
    }
  }
}
const setData = () => {
  let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
  // 如果找到了该节点，则更新数据
  if (nodeData) {
    nodeData.data.popShowData = popShowData.value
    nodeData.data.data = node_data.value
    flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)

  }
}
const reset = () => {
  popShowData.value = {
    APIBaseData: {
      name: '单个数据全部属性获取',
      desc: '通过数据，获取数据的固有属性',
    },
    APIState: {
      name: '成功',
      type: '布尔'
    },
    APIInput: {
      dataOne: {
        name: '3D数据',
        type: '3D文档',
        selectValue: '',
      },
      dataTwo: {
        name: '图纸文件',
        type: '2D文档',
        selectValue: '',
      },
      dataThree: {
        name: '图纸图页',
        type: '图页',
        selectValue: '',
      },
      dataFour: {
        name: '视图比例',
        type: '文本',
        value: '1',
      },
      dataFive: {
        name: '视图内容',
        type: '多选枚举',
        checkList: [],
      },
      dataSix: {
        name: '视图类型',
        type: '多选枚举',
        selectValue: '',
        aixsDirection: '',
        coordinatePlane: '',
        directionLineName: '',
      },
      dataSeven: {
        name: '修饰几何图形',
        type: '多选枚举',
        checkList: [],
      },
    },
    APIOutput: []
  }
}


function handleDataSixSelectValue() {
  popShowData.value.APIInput.dataSix.coordinatePlane = ''
}
</script>

<style scoped>
/* Your component styles go here */
</style>
